<template>
	<navbar title="确定报名" :isBack="true"></navbar>
	<loading v-if="!entryInfo"></loading>
	<template v-else>
		<view class="content" :style="{ minHeight: tools.clientTopHight() }">
			<!-- 基本信息 -->
			<basic :info="activeInfoD.list"></basic>
			<!-- 单人 -->
			<singleInfo v-if="entryInfo.way == 1" :list="entryInfo.params.formList"></singleInfo>
			<!-- 多人 -->
			<view v-else>
				<!-- //团队 -->
				<view class="teamShow">
					<view class="teamShow_title">团队资料</view>
					<view class="teamInfo flex-space-between">
						<view class="teamInfo_l">团队名称</view>
						<view class="teamInfo_r">
							{{entryInfo.params.team.name}}
						</view>
					</view>
					<view class="teamInfo flex-space-between">
						<view class="teamInfo_l">团队简称</view>
						<view class="teamInfo_r">
							{{entryInfo.params.team.abbreviation}}
						</view>
					</view>
					<view class="teamInfo flex-space-between">
						<view class="teamInfo_l">团队联系人</view>
						<view class="teamInfo_r">
							{{entryInfo.params.team.team}}
						</view>
					</view>
					<view class="teamInfo flex-space-between">
						<view class="teamInfo_l"> 联系电话</view>
						<view class="teamInfo_r">
							{{entryInfo.params.team.mobile}}
						</view>
					</view>
					<view class="teamInfo flex-space-between" v-if="entryInfo.params.team.score_imgs.length > 0">
						<view class="teamInfo_l"> 团队过往成绩</view>
						<view class="teamInfo_r" style="display: flex;">
							<view class="" style="margin-right: 10rpx;"  v-for="z in entryInfo.params.team.score_imgs">
								<image :src="z" style="width: 140rpx;height: 140rpx;border-radius: 10rpx;" mode="aspectFill" ></image>
							</view>
						</view>
					</view>
				</view>
				<view class="teamShow" v-if="entryInfo.params.referee">
					<view class="teamInfo flex-space-between">
						<view class="teamInfo_l">是否带裁判?</view>
						<view class="teamInfo_r">
							{{entryInfo.params.have_referee=='1' ? '带裁判' : '不带裁判'}}
						</view>
					</view>
				</view>
				<!-- 队员的报名信息 -->
				<teamInfo :list="entryInfo.params.formList"></teamInfo>
			</view>

		</view>
		<view class="bottom flex-space-between" v-if="!entryInfo.isOrder">
			<view class="price">{{ tools.isFree(entryInfo.info.price )}} </view>
			<view class="btn" @click="confirm">确认报名</view>
		</view>
	</template>
</template>

<script setup lang="ts">
	import { reactive, ref } from 'vue'
	import { getAddOrder, activeInfo } from '@/service/api/order'
	import tools from '@/utils/tools'
	import basic from '@/components/entry/basic.vue'
	import teamInfo from '@/components/entry/teamInfo.vue'
	import singleInfo from '@/components/entry/singleInfo.vue'
	import { onLoad } from '@dcloudio/uni-app'
	let entryInfo = JSON.parse(tools.getStorage('entryInfo'))
	// 确定按钮
	const confirm = () => {
		// 表单提交 
		getAddOrderApi()
	}
	const activeInfoD = reactive({
		list: {}
	})
	// 表单提交
	const getAddOrderApi = async () => {
		const { msg, code } = await getAddOrder(entryInfo.params)
		if (code == 0) return tools.showToast(msg)
		let params : { price : number } = msg as any
		if (params.price != 0) return tools.navTo('/pagesA/order/cashier?params=' + JSON.stringify(params))
		return uni.reLaunch({ url: '/pagesA/match/list' });
	}

	const getActiveInfoApi = async () => {
		let parmasD = { id: entryInfo.params.id }
		const { msg } = await activeInfo(parmasD)
		activeInfoD.list = msg
	}
	onLoad(() => {
		getActiveInfoApi()
	})
</script>

<style lang="scss" scoped>
	.content {
		background: rgba(244, 244, 248);
		padding: 24rpx 26rpx 30rpx 26rpx;
		padding-bottom: 160rpx;
	}

	.bottom {
		left: 0;
		right: 0;
		bottom: 0;
		width: 100%;
		z-index: 99999 !important;
		// height: 146rpx;
		position: fixed;
		padding-left: 26rpx;
		background-color: #fff;
		box-shadow: 0rpx -8rpx 12rpx rgba(0, 0, 0, 0.08);
		opacity: 1;
		padding-bottom: 46rpx;

		.price {
			height: 50rpx;
			display: flex;
			color: #e6425e;
			font-size: 40rpx;
			line-height: 50rpx;
			margin-left: 28rpx;

			&::before {
				content: '总计：';
				color: #000000;
				font-size: 28rpx;
			}
		}

		.btn {
			color: #fff;
			height: 100rpx;
			width: 420rpx;
			line-height: 100rpx;
			text-align: center;
			background: linear-gradient(270deg, #354678 0%, #5062A7 100%);
		}
	}

	.teamShow {
		width: 100%;
		background: rgba(255, 255, 255);
		opacity: 1;
		border-radius: 20rpx;
		margin-top: 20rpx;
		padding: 20rpx;

		.teamShow_title {
			width: 160rpx;
			height: 44rpx;
			font-size: 32rpx;
			font-family: PingFang SC;
			font-weight: bold;
			line-height: 44rpx;
			color: #5062A7;
			opacity: 1;
			margin-bottom: 10rpx;
		}

		.teamInfo {
			padding: 10rpx 0;
			display: flex;
			align-items: flex-start;

			.teamInfo_l {
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: 400;
				line-height: 50rpx;
				color: #777777;
				opacity: 1;
			}

			.teamInfo_r {
				width: 400rpx;
				justify-content: flex-start;
			}
		}
	}
</style>